<div>

    <div style="padding-bottom: 0;">
        <h3 translate="WIZARD.HTTPS.FF_ADD_CERT.TITLE"></h3>
    </div>

    <div layout="column">
        <ol>
            <li>
                <span translate="WIZARD.HTTPS.FF_ADD_CERT.STEP_1"></span>
                <div>
                    <md-button class="md-raised md-secondary"
                               ng-click="vm.loadCertificate()"
                               ng-href="{{ vm.getFirefoxCertificateDownloadUrl() }}">
                        {{ 'WIZARD.HTTPS.ACTION.DOWNLOAD_CERT' | translate }}
                    </md-button>
                </div>
            </li>
            <li>
                <span translate="WIZARD.HTTPS.FF_ADD_CERT.STEP_2"></span>
                <div style="width: 70%; height: auto; padding-top: 8px;">
                    <img class="image-frame" ng-src="/img/screenshots/httpsWizard/{{'WIZARD.HTTPS.FF_ADD_CERT.IMAGE_1' | translate}}" style="width: 100%; height: auto;"/>
                </div>
            </li>
        </ol>
    </div>

    <div layout="row" layout-align="end center" layout-align-xs="center center" layout-xs="column">
        <md-button type="button" ng-click="vm.backToDashboard()" class="md-raised md-secondary">
            {{ 'WIZARD.HTTPS.ACTION.CANCEL' | translate }}
        </md-button>
        <md-button type="button" ng-click="vm.prevStep()" class="md-raised md-secondary">
            {{ 'WIZARD.HTTPS.ACTION.BACK' | translate }}
        </md-button>
        <md-button class="md-raised md-primary md-accent" ng-click="vm.nextStep()" type="button">
            {{ 'WIZARD.HTTPS.ACTION.CONTINUE' | translate }}
        </md-button>
    </div>
</div>
